<template>
  <el-dialog :visible="value" :before-close="cancel" class="agency-lock-dialog">
    <template slot="title">
      {{dialogText.title}}
    </template>
    <el-form :model="lockForm" ref="lockForm" :rules="rules" label-width="140px" >
      <!--<el-form-item label="锁定范围：" prop="effectScope" v-if="[1,3].indexOf(lockClass) !== -1">-->
        <!--<el-checkbox-group v-model="lockForm.effectScope">-->
          <!--<el-checkbox :label="1" @change="thisLevelLock">-->
            <!--<span>本级锁定</span>-->
          <!--</el-checkbox>-->
          <!--<el-form-item>-->
            <!--<div class="extra-label">仅锁定选中用户</div>-->
          <!--</el-form-item>-->
          <!--<el-checkbox :label="2" @change="juniorLevelLock">-->
            <!--<span>下级锁定</span>-->
          <!--</el-checkbox>-->
        <!--</el-checkbox-group>-->
        <!--<el-form-item>-->
          <!--<div class="extra-label">锁定选中用户和所有下级</div>-->
        <!--</el-form-item>-->
      <!--</el-form-item>-->

      <el-form-item label="锁定方式：" prop="type">
        <el-checkbox-group v-model="lockForm.type">
          <template v-if="[1,3].indexOf(lockClass) !== -1">
            <el-checkbox :label="4"  @change="entireLock">
              <span>完全锁定</span>
            </el-checkbox>
            <el-checkbox :label="7" class="delete-contact-way" @change="deleteContact">
              删除绑定的手机/邮箱
            </el-checkbox>
            <el-form-item>
              <div class="extra-label">用户无法登录平台</div>
            </el-form-item>
            <el-checkbox :label="5" @change="indirectLock">
              <span>间接锁定</span>
            </el-checkbox>
            <el-form-item>
              <div class="extra-label">用户可以登录，不可投注，不可充提转，不可上分清算</div>
            </el-form-item>
          </template>
          <el-checkbox :label="6" v-if="[2,4].indexOf(lockClass) !== -1" @change="unlock">
            <span>解除锁定</span>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="reason">
        <template slot="label">
          {{dialogText.label}}
        </template>
        <el-input type="textarea" :rows="4" v-model="lockForm.reason" @keyup.enter.native="submit('lockForm')"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit('lockForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { form } from '@/build';

export default {
  name: 'account-lock-dialog',
  props: ['value', 'lock-class', 'status'],
  mixins: [form],
  data() {
    return {
      lockForm: {
        reason: undefined,
        type: [],
        // effectScope: [],
      },
      rules: {
        // effectScope: [
        //   { required: true, message: `请选择${this.lockClass === 1 || this.lockClass === 3 ? '锁定' : '解锁'}范围`, trigger: 'change' },
        // ],
        type: [
          { required: true, message: `请选择${this.lockClass === 1 || this.lockClass === 3 ? '锁定' : '解锁'}方式`, trigger: 'change' },
        ],
        reason: [
          { required: true, message: `请填写${this.lockClass === 1 || this.lockClass === 3 ? '锁定' : '解锁'}原因`, trigger: 'change' },
        ],
      },
    };
  },
  computed: {
    dialogText() {
      const dialogText = {
        title: '',
        type: '',
        label: '',
      };
      switch (this.lockClass) {
        case 1:
          dialogText.title = '申请批量: 锁定';
          dialogText.type = '锁定';
          dialogText.label = '申请锁定原因';
          break;
        case 2:
          dialogText.title = '申请批量: 解锁';
          dialogText.type = '解锁';
          dialogText.label = '申请解锁原因';
          break;
        case 3:
          dialogText.title = '申请: 锁定';
          dialogText.type = '锁定';
          dialogText.label = '申请锁定原因';
          break;
        case 4:
          dialogText.title = '申请: 解锁';
          dialogText.label = '申请解锁原因';
          dialogText.type = '解锁';
          break;
      }
      return dialogText;
    },

  },
  mounted() {
    // this.lockForm.type = this.status
  },
  methods: {
    // thisLevelLock(val) {
    //   if (val) {
    //     this.lockForm.effectScope = [1];
    //   }
    // },
    // juniorLevelLock(val) {
    //   if (val) {
    //     this.lockForm.effectScope = [2];
    //   }
    // },
    unlock(val) {
      if (val) {
        this.lockForm.type = [6];
      }
    },
    indirectLock(val) {
      if (val) {
        this.lockForm.type = [5];
      }
    },
    deleteContact(val) {
      if (val) {
        this.lockForm.type = [4, 7];
      }
    },
    entireLock(val) {
      if (!val) {
        this.lockForm.type = [];
      } else {
        this.lockForm.type = [4];
      }
    },
    cancel() {
      this.resetForm('lockForm');
      this.$emit('input', false);
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.lockForm);
          this.resetForm('lockForm');
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
  .el-radio {
    width: 100%;
    &+.el-radio{
      margin: 0;
    }
  }
  .extra-label {
    padding: 0 0 0 23px;
    color: #444 !important;
  }
  .agency-lock-dialog /deep/.delete-contact-way{
    margin-left: 90px;
  }
</style>
